<template>
  <ul class="navs">
    <li><RouterLink to="/">首页</RouterLink></li>
    <li v-for="item in $store.state.category.category" :key="item.name">
      <RouterLink active-class="home" v-if="item.id" :to="`/category/${item.id}`">
        {{ item.name }}
      </RouterLink>
      <a v-else href="javascript:;">{{ item.name }}</a>
    </li>
  </ul>
</template>

<script>
export default {
  setup() {}
}
</script>

<style lang="less">
.navs {
  width: 820px;
  display: flex;
  justify-content: space-around;
  padding-left: 40px;
  li {
    margin-right: 40px;
    width: 38px;
    text-align: center;
    a {
      font-size: 16px;
      line-height: 32px;
      height: 32px;
      display: inline-block;
      &.home {
        color: var(--xtx-color);
        border-bottom: 1px solid var(--xtx-color);
      }
    }
    &:hover {
      a {
        color: var(--xtx-color);
        border-bottom: 1px solid var(--xtx-color);
      }
    }
  }
}
</style>
